<template>
  <view class="loading flex-center">
    <wd-loading color="#ffe1df" />
    <view class="text mt-20">
      <span class="text" style="--i: 1">正</span>
      <span class="text" style="--i: 2">在</span>
      <span class="text" style="--i: 3">拼</span>
      <span class="text" style="--i: 4">命</span>
      <span class="text" style="--i: 5">请</span>
      <span class="text" style="--i: 6">求</span>
      <span class="text" style="--i: 7">中</span>
      <span class="text" style="--i: 8">~</span>
    </view>
  </view>
</template>

<style scoped lang="less">
@keyframes upDown {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(-12rpx);
  }

  40%,
  100% {
    transform: translateY(0);
  }
}

.loading {
  height: 100%;
  flex-direction: column;
  color: #333;
  font-size: 28rpx;

  .text {
    color: #333;
    font-size: 28rpx;
    display: inline-block;
    animation: upDown 1.5s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
  }
}
</style>
